<template>
  <div class="container">
    <el-row :gutter="24">
      <el-col :span="8" class="control">
        <el-button size="medium" type="warning" plain @click="handclick_add(null, 0)">新增管理员</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="16">
        <el-table :data="power.list || [{}]" border :row-class-name="tableRowClassName" style="width:100%">
          <el-table-column type="index" label="序号" align="center" min-width="10"></el-table-column>
          <el-table-column prop="name" label="管理员名称" align="center" />
          <el-table-column prop="account" label="管理员账号" align="center" />
          <el-table-column prop="role_name" label="角色类型" align="center" />
          <el-table-column prop="last_use_time" label="上次登录时间" align="center">
            <template slot-scope="{row}">
              <span>{{ row.last_use_time | masDateFormat('yyyy-mm-dd') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" min-width="300px">
            <template slot-scope="scope">
              <el-button size="mini" type="success" :disabled="!scope.row.role_id" plain @click="jurisdiction(scope.row, 1)">权限</el-button>
              <el-button
                size="mini"
                type="success"
                plain
                @click="resetPassword(scope.row,scope.$index)"
              >重置密码</el-button>
              <el-button size="mini" type="success" plain @click="edit(scope.row, 1)">编辑</el-button>
              <el-button size="mini" type="danger" plain @click="del(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="8" v-show="show_jurisdiction">
        <el-card >
          <div class="title">{{power.roleName}} &emsp;(只读)</div>
          <el-tree
            :readonly='true'
            class="authTree"
            :data="power.auth"
            default-expand-all
            :expand-on-click-node="false"
            show-checkbox
            node-key="name"
            @check="check"
            ref="authTree"
          >
          </el-tree>
          <el-button size="mini" @click="show_jurisdiction=false" type="primary" plain>关闭</el-button>
        </el-card>
        
      </el-col>
    </el-row>

    <!-- 添加管理员 -->
    <el-dialog :visible.sync="editShow01" width="450px" title="添加管理员" class="dialog_edit">
      <el-form label-width="120px" ref="form_change" :model="power.form" :rules="rules">
        <el-form-item label="管理员账号" prop="account">
          <el-input v-model="power.form.account"></el-input>
        </el-form-item>
        <el-form-item label="管理员名称" prop="name">
          <el-input v-model="power.form.name"></el-input>
        </el-form-item>
        <el-form-item label="初始登录密码" prop="password">
          <el-input v-model="power.form.password"></el-input>
        </el-form-item>
        <el-form-item label="管理员类型" prop="role_id">
          <el-select
            clearable
            v-model="power.form.role_id"
            placeholder="管理员类型"
            @change="changeAgent_power"
          >
            <el-option
              :value="item.id"
              :label="item.name"
              v-for="(item, key) in power.RoleList"
              :key="key"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button class="confirm" type="primary" size="small" @click="add_adm">添加管理员</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 编辑管理员 -->
    <el-dialog :visible.sync="editShow" width="450px" title="编辑管理员信息" class="dialog_edit">
      <el-form label-width="120px" ref="forms" :model="power.form" :rules="rules">
        <el-form-item label="管理员账号" prop="account">
          <el-input v-model="power.form.account" disabled></el-input>
        </el-form-item>
        <el-form-item label="管理员名称" prop="name">
          <el-input v-model="power.form.name"></el-input>
        </el-form-item>
        <!-- <el-form-item label="初始登录密码" prop="password">
          <el-input v-model="power.form.password"></el-input>
          <el-button size="mini" type="warning" plain @click="power.form.name='abc123'">重置密码</el-button>
        </el-form-item>-->
        <el-form-item label="管理员类型" prop="role_id">
          <el-select
            
            clearable
            v-model="power.form.role_id"
            :placeholder="power.form.role_name"
            @change="changeAgent_power"
          >
            <el-option
              :value="item.id"
              :label="item.name"
              v-for="(item, key) in power.RoleList"
              :key="key"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button class="confirm" type="primary" size="small" @click="confirm">提 交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
//引入接口
import {
  GetAllUserInfo_role,
  InsertUserManager_role,
  GetAllRoleInfo_role,
  EditUser_role,
  ChangerPassWord_role,
  DeleteUser_role,
  inquiryAuthLis_role,
  getAuthTree_role
} from "@/api/role.js";
//引入vuex
import { mapState } from "vuex";

export default {
  data() {
    return {
      show_jurisdiction: false,
      editType: 0,
      editShow: false,
      editShow01: false,
      rolesList: [
        {
          name: "超级管理员",
          auth: ["bankCardOperationForm", "transactionManagements"],
        },
        {
          name: "客服",
          auth: ["capitalIncomeStatement", "bankCardOperationForm"],
        },
        {
          name: "交易管理",
          auth: ["transactionManagements", "businessCashStatement"],
        },
        {
          name: "财务",
          auth: ["merchantOperationTable", "groupOperationTable"],
        },
        {
          name: "老板",
          auth: ["groupOperationTable", "capitalIncomeStatement"],
        },
      ],
     
      rules: {
        name: [
          { required: true, message: "请输入管理员名称", trigger: "blur" },
        ],
        account: [
          { required: true, message: "请输入管理员账号", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入管理员密码", trigger: "blur" },
        ],
        role_id: [
          { required: true, message: "请选择管理员类型", trigger: "blur" },
        ],
      },
    };
  },
  filters: {
    masDateFormat: function (msg = "", pattern = "") {
      var mt = new Date(msg);
      var y = mt.getFullYear();
      var m = (mt.getMonth() + 1).toString().padStart(2, "0");
      var d = mt.getDate();
      if (pattern == "yyyy-mm-dd") {
        return y + "-" + m + "-" + d;
      }
      return y + "-" + m + "-" + d;
    },
  },
  created() {
    this.GetAllUserInfo_role();
    this.GetAllRoleInfo_role();
    this.getAuthTree_role()
  },
  methods: {
    inquiryAuthLis_role(id){
      inquiryAuthLis_role({
        role_id:id
      }).then(res=>{
        // console.log(res);
         this.$refs.authTree.setCheckedKeys(res.data.list2.auth);
      })
    },
    tableRowClassName({ row, rowIndex }) {
      // console.log(rowIndex % 2)
      if (rowIndex % 2 == 1) {
        return "warning-row";
      } else {
        return "success-row";
      }
    },
    check(e, a) {
      // console.log(e);
      // console.log(a);
      console.log(a.checkedKeys);
    },
    jurisdiction(item) {
      this.show_jurisdiction = true;
      this.$store.commit("get_jurisdiction", item);
      this.inquiryAuthLis_role(item.role_id)
    },
    DeleteUser_role(id) {
      DeleteUser_role({
        user_id: id,
      }).then((res) => {
        if (res.status == 0) {
          this.$message({
            type: "success",
            message: res.msg,
          });
          this.GetAllUserInfo_role();
        } else if (res.status == 1) {
          this.$message({
            type: "warning",
            message: res.msg,
          });
        }
      });
    },
    GetAllUserInfo_role() {
      GetAllUserInfo_role({}).then((res) => {
        // console.log(res);
        this.$store.commit("getList_power", res.data.list);
      });
    },
    getAuthTree_role(){
      getAuthTree_role().then((res)=>{
        // console.log(res);
        this.$store.commit('getRoleTreeList_power',res.data.list)
      })
    },
    GetAllRoleInfo_role() {
      GetAllRoleInfo_role().then((res) => {
        // console.log(res);
        this.$store.commit("getRoleList_power", res);
      });
    },
    resetPassword(item, index) {
      this.$confirm("密码 : abc123", "确定重置密码吗？", {
        type: "warning",
      })
        .then((res) => {
          console.log(res.msg);
          // console.log(item.user_id, "查看ID");
          // console.log(item.password, "查看密码");
          
          this.ChangerPassWord_role(item.user_id);
        })
        .catch((err) => {
          // console.log(err);
        });
    },
    ChangerPassWord_role(id) {
      ChangerPassWord_role({
        user_id: id,
        password: "abc123",
      }).then((res) => {
        if (res.status == 0) {
          this.$message({
            type: "success",
            message: res.msg,
          });
        }else{
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
        this.GetAllUserInfo_role();
      });
    },
    handclick_add() {
      this.editShow01 = true;
      this.$nextTick(() => {
        this.$refs["form_change"].clearValidate();
      });
      var form = {
        account: "",
        last_use_time: "",
        name: "",
        role_name: "",
        user_id: "",
        password: "abc123",
        role_id: "",
      };
      this.$store.commit("changeform_power", form);
    },
    add_adm() {
      this.$refs["form_change"].validate((valid) => {
        if (valid) {
          this.$confirm("确定添加管理员吗？", {
            type: "warning",
          })
            .then((res) => {
              console.log(this.$store.state.power.form);
              InsertUserManager_role({
                name: this.$store.state.power.form.name,
                account: this.$store.state.power.form.account,
                role_id: this.$store.state.power.form.role_id,
                password: this.$store.state.power.form.password,
              }).then((res) => {
                console.log(res);
                if (res.status == 1) {
                  this.$message({
                    type: "error",
                    message: res.msg,
                  });
                } else {
                  this.GetAllUserInfo_role();
                  this.$message({
                    type: "success",
                    message: res.msg,
                  });
                }
              });
              this.editShow01 = false;
            })
            .catch((err) => {
              console.log(err);
            });
        }
      });
    },
    edit(item, type) {
      this.editShow = true;
      this.$nextTick(() => {
        this.$refs["forms"].clearValidate();
      });
      let data = JSON.parse(JSON.stringify(item));
      this.$store.commit("changeform_power", data);
    },

    confirm() {
      this.$refs["forms"].validate((valid) => {
        if (valid) {
          this.$confirm("确定更改信息吗？", {
            type: "warning",
          })
            .then((res) => {
              EditUser_role({
                user_id: this.$store.state.power.form.user_id,
                role_id: this.$store.state.power.form.role_id,
                user_name: this.$store.state.power.form.name,
              }).then((res) => {
                if (res.status == 0) {
                  this.$message({
                    type: "success",
                    message: res.msg,
                  });
                }else{
                  this.$message({
                    type: "error",
                    message: res.msg,
                  });
                }
                this.GetAllUserInfo_role();
              });
              this.editShow = false;
            })
            .catch((err) => {
              console.log(err);
            });
        }
      });
    },
    changeAgent_power(value) {
      // console.log(value);
      // console.log(this.$store.state.power.form.role_id)
    },
    del(item) {
      this.$confirm("确定删除吗？", {
        type: "warning",
      })
        .then(() => {
          console.log(item.user_id);
          this.DeleteUser_role(item.user_id);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  computed: {
    ...mapState(["power"]),
  },
};
</script>
<style lang="less" scoped>
.title {
  text-align: center;
  line-height: 48px;
  height: 48px;
}
.buttons {
  margin: 30px 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.authTree {
  font-size: 12px;
}
.dialog_edit {
  /deep/.el-input {
    width: 150px;
    margin-right: 10px;
  }
  /deep/.el-input__inner {
    width: 150px;
  }
}
.container {
  overflow: hidden;
}
.control {
  display: flex;
  justify-content: flex-start;
}
</style>
